<template>
  <view class="container">
    <view class="avatar">
      <image src="/static/images/user-circle.png"></image>
    </view>

    <view class="form">
      <u--form labelPosition="left" :model="business" :rules="rules" ref="bind">
        <u-form-item label="手机" prop="mobile" borderBottom>
          <u--input
            type="text"
            v-model="business.mobile"
            border="none"
            placeholder="请输入手机号"
          ></u--input>
        </u-form-item>

        <u-form-item label="密码" prop="password" borderBottom>
          <u--input
            type="password"
            v-model="business.password"
            border="none"
            placeholder="请输入密码"
          ></u--input>
        </u-form-item>

        <view style="margin-top: 25px">
          <u-button type="warning" @click="onSubmit">绑定</u-button>
        </view>
      </u--form>
    </view>

    <view class="agreement">
      <u-checkbox-group v-model="agreementStatus">
        <u-checkbox name="agreement" label="我已阅读并同意" shape="circle" />
        <navigator class="url" url="/pages/business/agreement"
          >用户服务协议、隐私政策</navigator
        >
      </u-checkbox-group>
    </view>

    <!-- 信息提示 -->
    <u-toast ref="notice"></u-toast>
  </view>
</template>
<script>
export default {
  data() {
    return {
      business: {
        mobile: "17777777777",
        password: "123123",
      },
      rules: {
        mobile: [
          {
            // 自定义验证函数，见上说明
            validator: (rule, value, callback) => {
              // 上面有说，返回true表示校验通过，返回false表示不通过
              // uni.$u.test.mobile()就是返回true或者false的
              if (value) {
                return uni.$u.test.mobile(value);
              } else {
                return false;
              }
            },
            type: "string",
            required: true,
            message: "手机号码不正确",
            // 触发器可以同时用blur和change
            trigger: ["change", "blur"],
          },
        ],
        password: {
          type: "string",
          required: true,
          message: "请填写密码",
          trigger: ["blur", "change"],
        },
      },
      agreementStatus: [],
      openid: "",
    };
  },
  methods: {
    onSubmit() {
      //判断如果有通过表单效验，才调用接口
      this.$refs.bind
        .validate()
        .then(async (res) => {
          console.log("效验通过");
          if (this.agreementStatus.length <= 0) {
            this.$refs.notice.show({
              type: "error",
              message: "请阅读并同意许可协议",
            });
            return false;
          }

          //组装数据
          var params = {
            ...this.business,
            openid: this.openid,
          };

          //发送请求
          var result = await uni.$u.http.post("/business/bind", params);

          if (result.code == 0) {
            this.$refs.notice.show({
              type: "error",
              message: result.msg,
            });

            return false;
          } else {
            this.$refs.notice.show({
              type: "success",
              message: result.msg,
              complete: function () {
                //存本地存储
                uni.setStorageSync("business", result.data);

                //返回上一个界面
                uni.$u.route({
                  type: "back", //history.go(-1)
                  delta: 1, //返回的层级
                });
              },
            });
          }
        })
        .catch((error) => {
          this.$refs.notice.show({
            type: "error",
            message: "表单效验未通过",
          });
          return false;
        });
    },
  },
  onReady() {
    //onReady 为uni-app支持的生命周期之一
    this.$refs.bind.setRules(this.rules);
  },
  onLoad(options) {
    this.openid = options.openid ? options.openid : "";
  },
};
</script>

<style>
page {
  background-color: #f8fafe;
}

.container .avatar {
  text-align: center;
  background-color: #fff;
  padding-bottom: 20px;
}

.avatar image {
  width: 80px;
  height: 80px;
  margin: 50px 0 20px;
}

.form {
  margin: 0 50rpx;
  box-sizing: border-box;
}

.btn {
  margin-top: 25px;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* #ifdef H5 || APP-PLUS */
.u-icon {
  margin-left: 10px;
}
/* #endif */

.agreement {
  display: flex;
  justify-content: center;
  margin-top: 30px;
  font-size: 14px;
}

navigator {
  color: #33ccff;
}
</style>
